<template>
  <div class="myDiv">
    <Header title="月收入统计"></Header>
    <div class="title">
      <div>
        <span>请选择年份:</span>
        <el-select size="mini" style="width:100px" v-model="isyear" placeholder="请选择">
          <el-option label="请选择" value></el-option>
          <el-option v-for="(obj,i) in year" :key="i" :label="obj.addtime" :value="obj.addtime"></el-option>
        </el-select>
      </div>
      <el-button size="mini" @click="search(isyear)" style="width:80px" type="primary">年份查询</el-button>
      <el-button size="mini" @click="week" style="width:100px" type="primary">查询最近7天</el-button>
    </div>
    <el-table
      v-if="month"
      :data="vesssel"
      v-loading="loading"
      border
      style="width: 100%;"
      size="mini"
      show-summary
      @row-click="day"
    >
      <el-table-column fixed align="center" show-overflow-tooltip width="69" label="月份">
        <template slot-scope="scope">{{scope.row.orderTime.split(",")[0]}}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="orderTotalprice" align="center" label="总收入"></el-table-column>
      <el-table-column show-overflow-tooltip prop="idcode" align="center" label="微信收入"></el-table-column>
      <el-table-column show-overflow-tooltip prop="userid" width="81" align="center" label="支付宝收入"></el-table-column>
      <el-table-column show-overflow-tooltip prop="openid" width="70" align="center" label="其他收入"></el-table-column>
    </el-table>
    <el-table
      v-else
      :data="vesssel"
      v-loading="loading"
      border
      style="width: 100%;"
      size="mini"
      show-summary
    >
      <el-table-column fixed align="center" show-overflow-tooltip width="90" label="日期">
        <template slot-scope="scope">{{scope.row.orderTime.split(",")[0]}}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="orderTotalprice" align="center" label="总收入"></el-table-column>
      <el-table-column show-overflow-tooltip prop="idcode" align="center" label="微信收入"></el-table-column>
      <el-table-column show-overflow-tooltip prop="userid" width="81" align="center" label="支付宝收入"></el-table-column>
      <el-table-column show-overflow-tooltip prop="openid" width="70" align="center" label="其他收入"></el-table-column>
    </el-table>
    <Page :total="total" ref="page" @pagenum="pagenum" class="page"></Page>
  </div>
</template>

<script>
import Header from "@/components/header";
import Page from "@/components/pagination";

export default {
  components: { Header, Page },
  props: {},
  data() {
    return {
      page: 1,
      rows: 12,
      total: 0,
      year: [],
      isyear: "",
      loading: true,
      tableData: [], //全部数据
      vesssel: [], //页面临时数据
      month: true //月份表格展示
    };
  },
  watch: {
    page: function() {
      if (this.page == 1) {
        this.vesssel = this.tableData.slice(0, this.rows);
      } else if (this.page == Math.ceil(this.tableData.length / 12)) {
        this.vesssel = this.tableData.slice((this.page - 1) * this.rows);
      } else {
        this.vesssel = this.tableData.slice(
          (this.page - 1) * this.rows,
          this.rows * this.page
        );
      }
    }
  },
  computed: {},
  methods: {
    pagenum(data) {
      this.page = data[0];
      this.rows = 12;
    },
    search(year) {
      this.month = true;
      this.$http(this.api.selectMonthMoneyByOrgcode, {
        addtime: year,
        page: 1,
        rows: 10,
        sort: "orderTime",
        order: "asc"
      }).then(res => {
        this.$refs.page.changecurrent(1);
        this.total = res.data.pageData.total;
        this.tableData = res.data.pageData.data.reverse();
        this.loading = false;
        this.vesssel = this.tableData.slice(0, this.rows);
      });
    },
    // 周查询
    week() {
      this.month = false;
      this.$http(this.api.selectWeekMoneyByDay).then(res => {
        if (res.data.result == "true") {
          this.$refs.page.changecurrent(1);
          this.total = res.data.pageData.total;
          this.tableData = res.data.pageData.data.reverse();
          this.loading = false;
          this.vesssel = this.tableData.slice(0, this.rows);
        }
      });
    },
    day(row) {
      this.$http(this.api.selectDayMoneyByMonth, {
        addtime: row.orderTime
      }).then(res => {
        this.$router.push({
          path: "/days",
          query: { data: res.data.pageData.data }
        });
      });
    }
  },
  created() {
    // 获取查询年份
    this.$http(this.api.selectYearTime).then(res => {
      if (res.data.result == "true") {
        this.year = res.data.pageData.data;
      }
    });
    // 默认展示今年的数据
    let now = new Date().getFullYear();
    this.search(now);
  },
  mounted() {}
};
</script>
<style scoped>
.title {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 5px 0;
}
/* .page {
  width: 100%;
  position: absolute;
  bottom: 15px;
  left: 0;
} */
</style>